<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { statusList } from '../dictionary'
import { timeFormat } from '@/utils/publicMethods'
import { getDataApi, deleteFileApi } from '@/api/myDownload'
import { ElMessage } from 'element-plus'

const Downloadloading = ref(false)
const downloadList = ref<any>([])
const downloadTotal = ref<any>(0)
const myDownloadFrom = ref<any>({
  state: '99',
  date: [],
  page: 1,
  rows: 10
})

const getDownloadList = async () => {
  const params = {
    sqlId: 'export.getFileList',
    sqlParam: JSON.stringify({
      state: myDownloadFrom.value.state === '99' ? undefined : myDownloadFrom.value.state,
      startDate:
        myDownloadFrom.value.date.length === 2
          ? timeFormat(myDownloadFrom.value.date[0]).YYYYMMDD
          : undefined,
      endDate:
        myDownloadFrom.value.date.length === 2
          ? timeFormat(myDownloadFrom.value.date[1]).YYYYMMDD
          : undefined
    }),
    pagination: true,
    dbName: 'report',
    debug: 0,
    page: 1,
    rows: 10
  }
  await getDataApi(params).then((res: any) => {
    console.log(res)
    downloadList.value = res.rows
  })
}

const SearchBtn = () => {
  console.log(myDownloadFrom.value)
  getDownloadList()
}

const downBtn = (info: any) => {
  // // console.log('下载', info)
  // ;<a href='download?id="+row.file_id+"&type="+row.file_type+"&name="+encodeURI(row.file_name)+"'>
  //   下载
  // </a>
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href =
    import.meta.env.VITE_APP_URL +
    '/download?id=' +
    info.file_id +
    '&type=' +
    info.file_type +
    '&name=' +
    encodeURI(info.file_name)
  // link.setAttribute('download', props.fromInfo.title + '详情.xlsx')
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const deleteBtn = async (info: any) => {
  // console.log('删除', info)
  const params = {
    id: info.file_id,
    type: 'xlsx'
  }
  await deleteFileApi(params).then((res: any) => {
    // console.log(res)
    if (res === 'success') {
      getDownloadList()
      ElMessage({ message: '删除成功！', type: 'success' })
    } else {
      console.log(res)
      ElMessage({ message: '删除失败！', type: 'error' })
    }
  })
}
const handleSizeChange = (val: number) => {
  myDownloadFrom.value.page = 1
  myDownloadFrom.value.rows = val
  getDownloadList()
}

const handleCurrentChange = (val: number) => {
  myDownloadFrom.value.page = val
  getDownloadList()
}

onMounted(() => {
  getDownloadList()
})
</script>
<template>
  <div class="myDownload">
    <el-form :inline="true" :model="myDownloadFrom" style="margin-top: 15px">
      <el-form-item label="下载状态：">
        <el-select v-model="myDownloadFrom.state" style="width: 120px">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间范围：">
        <el-date-picker
          v-model="myDownloadFrom.date"
          type="daterange"
          range-separator="和"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="default"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="SearchBtn">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      class="TableBox"
      v-loading="Downloadloading"
      :data="downloadList"
      stripe
      border
      style="width: 100%"
    >
      <el-table-column prop="file_name" label="文件名" />
      <el-table-column prop="create_time" label="请求时间" width="180" />
      <el-table-column prop="finish_time" label="完成时间" width="180" />
      <el-table-column prop="state" label="状态(队列位置)" width="180">
        <template #default="scope">
          <!-- {"1":"排队中("+row.quence_index+")","2":"下载完成","3":"下载失败","4":"下载中"} -->
          <span v-if="scope.row.state === '1'">排队中{{ scope.row.quence_index }}</span>
          <span v-else-if="scope.row.state === '2'">下载完成</span>
          <span v-else-if="scope.row.state === '3'">下载失败</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button text type="primary" @click="downBtn(scope.row)">下载</el-button>
          <el-button type="danger" text @click="deleteBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="myDownloadFrom.page"
      v-model:page-size="myDownloadFrom.rows"
      :page-sizes="[10, 20, 30, 40]"
      size="default"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="downloadTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>
<style scoped lang="less">
.myDownload {
  position: relative;
  padding: 0 8px;
  .TableBox {
    height: calc(100vh - 270px);
  }
  .paginationBox {
    position: fixed;
    bottom: 20px;
  }
}
</style>
